<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉框左右移动</title>
    <script src="../js/jQuery.js"></script>
    <script>

        function right(){
          //向右移动
          //找到左边被选中的option
          $("#left > option:selected").appendTo($("#right"));
        }


        function left(){
          $("#right > option:selected").appendTo($("#left"));
        }
    </script>
    </script>
</head>
<body>
  <select multiple="multiple" size="7" id="left">
    <option>成都</option>
    <option>都江堰</option>
    <option>乐山</option>
    <option>自贡</option>
    <option>南充</option>
  </select>

  <input type="button" value="向右移动" onclick="right()"/>
  <input type="button" value="向左移动" onclick="left()"/>

  <select multiple="multiple" size="7" id="right">

  </select>
</body>
</html>